<template>
  <view class="ip-info">
    <viwe class="ip-domain">
      <uni-easyinput
        ref="domain"
        class="uni-mt-5"
        trim="all"
        :clearable="false"
        v-model="otherIPAddress"
        placeholder="请输入查询的IP地址,默认显示并查询本机地址"
      />
      <van-button type="primary" size="small" @click="getOrtherIPAddress"
        >点击查询</van-button
      >
    </viwe>
    <uni-card padding="20rpx 0" :thumbnail="avatar">
      <view style="border: 1px solid #f2f2f2; padding: 0 10rpx">
        您当前IP地址信息
      </view>
      <view style="padding: 0 10rpx">
        <view style="padding-top: 20rpx"> 解析地址：{{ `${IPHome.ip}` }} </view>
        <view style="padding-top: 20rpx">
          归属地：{{
            IPHome.data.country +
              '-' +
              IPHome.data.prov +
              '-' +
              IPHome.data.city || ''
          }}
          {{ IPHome.data.district !== '' ? '-' + IPHome.data.district : '' }}
        </view>
        <view style="padding-top: 20rpx">
          国家编码：{{ IPHome.data.areacode || '' }}
        </view>
        <view style="padding-top: 20rpx">
          行政编码：{{ IPHome.data.adcode || '' }}
        </view>
        <view style="padding-top: 20rpx">
          自治区编码：{{ IPHome.data.asnumber || '' }}
        </view>
        <view style="padding-top: 20rpx">
          邮政编码：{{ IPHome.data.zipcode || '' }}
        </view>
        <view style="padding-top: 20rpx">
          时区：{{ IPHome.data.timezone || '' }}
        </view>
        <view style="padding-top: 20rpx">
          网络运营商：{{ IPHome.data.isp || '' }}
        </view>
        <view style="padding-top: 20rpx">
          所属机构：{{ IPHome.data.owner || '' }}
        </view>
        <view style="padding-top: 20rpx">
          经纬度：{{ IPHome.data.lng + ',' + IPHome.data.lat || '' }}
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
import mixin from "@/mixins/mixins.js";
export default {
  name: 'IpHome',
  mixins: [mixin],
  data() {
    return {
      myIPAddress: '', // 本机IP地址
      otherIPAddress: '', // 其他IP地址
      IPHome: {} // IP归属地
    }
  },
  created() {
    this.getMyIPAddress()
  },
  mounted() {
    // 因为任务队列问题，需要获取IP信息比获取本机IP慢
    setTimeout(() => {
      this.getOrtherIPAddress()
      // console.log('timeout')
    }, 100)
  },
  methods: {
    async getMyIPAddress() {
      // 本机IP地址
      const res = await this.$http.get('https://www.taobao.com/help/getip.php')
      // console.log(res)
      const reg = /"([^"]*)"/ // 如果字符串中存在双引号，则捕获组将包含双引号内的所有内容。
      this.myIPAddress = res.match(reg)[1] // res.match(reg) 返回一个数组
      // this.otherIPAddress = this.myIPAddress // 刚进如页面用本机IP发送请求
    },
    async getOrtherIPAddress() {
      // console.log(this.otherIPAddress)
      let res
      // 默认显示本机IP地址信息
      if (!this.otherIPAddress) {
        res = await this.$http.get(
          `https://eolink.o.apispace.com/ipguishu/ip/geo/v1/district?ip=${this.myIPAddress}`
        )
      } else {
        res = await this.$http.get(
          `https://eolink.o.apispace.com/ipguishu/ip/geo/v1/district?ip=${this.otherIPAddress}`
        )
      }
      // console.log(res)
      if (res.code === 'Success') {
        this.IPHome = res
      } else {
        this.$msg('查询失败，请稍后重试或联系管理员')
      }
    },

  }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-easyinput {
  margin-left: 15px;
}
::v-deep .van-button {
  margin: 6rpx 10rpx;
}
.ip-info {
  .ip-domain {
    display: flex;
    margin-top: 20rpx;
    // .icp-desc {
    //   line-height: 68rpx;
    //   width: 80rpx;
    // }
  }
}
</style>
